<template>
  <el-dialog title="查看" :visible.sync="isShow" width="90%" append-to-body :close-on-click-modal="false"
             :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px" class="myfroms">
      <div class="mytxt">
        <el-row>
          <div v-if="type != 'attr'">
            <el-col :span="8">
              <el-form-item label="游戏品类" prop="dictCodeId">
                <el-select :disabled="disabled" v-model="form.dictCodeId" placeholder="请选择游戏品类">
                  <el-option v-for="(item,indx) in gameList" :key="indx" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="区服" prop="region">
                <el-select :disabled="disabled" filterable v-model="form.region" placeholder="请选择区服">
                  <el-option v-for="item in regionalServers" :key="item.gameField" :label="item.gameField"
                             :value="item.gameField"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收编号" prop="orderNumber">
                <el-input :disabled="disabled" v-model="form.orderNumber" placeholder="请输入回收编号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="账号" prop="account">
                <el-input :disabled="disabled" v-model="form.account" placeholder="请输入账号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="密码" prop="password">
                <el-input :disabled="disabled" v-model="form.password" placeholder="请输入密码"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收渠道" prop="recycleChannelId">
                <el-select :disabled="disabled" v-model="form.recycleChannelId" placeholder="请选择回收渠道">
                  <el-option v-for="item in recycleChannelList" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="账号描述" prop="accountDescription">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.accountDescription" placeholder="请输入账号描述"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="副标题" prop="accountDescription">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.description" placeholder="请输入副标题"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="销售金额" prop="saleAmount">
                <el-input :disabled="disabled" v-model="form.saleAmount" placeholder="请输入销售金额"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定类目" prop="bindingChannelId">
                <el-select :disabled="disabled" v-model="form.bindingChannelId" placeholder="请选择绑定类目">
                  <el-option v-for="item in bindingChannelList" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定手机" prop="phoneName">
                <el-select :disabled="disabled" filterable v-model="form.phoneId" placeholder="请选择绑定手机">
                  <el-option v-for="(item, indx) in phoneList" :key="indx" :label="item.phoneNumber"
                             :value="item.phoneId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="手机编号" prop="phoneCode">
                <el-input disabled v-model="form.phoneCode" placeholder="请先选择绑定手机号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId">
                <el-select :disabled="disabled" v-model="form.changeId" placeholder="请选择换绑客服">
                  <el-option v-for="  item   in   changeList  " :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleId">
                <el-select :disabled="disabled" v-model="form.recycleId" placeholder="请选择回收客服">
                  <el-option v-for="  item   in   recycleList  " :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="上架编号" prop="shelfNumber">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.shelfNumber" placeholder="请输入上架编号"/>
              </el-form-item>
            </el-col>
          </div>

          <el-col :span="24" v-if="form.imagess && form.imagess.length > 0">
            <el-form-item label="图片">
              <el-row>
                <el-col :span="3" v-for="(item,indx) in form.imagess" :key="indx">
                  <div class="show-img">
                    <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.imagess"/>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="mystatu">
        <p v-if="form.dictCodeId">属性信息</p>
        <div v-for="(child,ii) in result" :key="ii" class="render" v-if="form.dictCodeId">
          <!--下拉框-->
          <el-form-item v-if="child.fieldType === 'select' && child && child.children && child.children.length > 0"
                        :label="child.gameField" :prop="'dropDown_'+child.id"
                        :rules="{required:child.isRequired==1?true:false,message:'不能为空',trigger:'change'}">
            <el-select :disabled="disabled" v-model="form['dropDown_'+child.id]">
              <el-option v-for="(item,indx) in child.children" :key="indx" :label="item.gameField"
                         :value="parseInt(item.id)"/>
            </el-select>
          </el-form-item>

          <!--输入框-->
          <div style="display: flex; flex-wrap: wrap; gap: 10px;"
               v-if="child && child.fieldType === 'input' && child.children && child.children.length > 0">
            <el-form-item v-for="item in child.children" :key="item.id" :label="item.gameField"
                          :prop="'inputValues_'+item.id"
                          :rules="{required:child.isRequired==1?true:false,message:'不能为空',trigger:'blur'}">
              <el-input :disabled="disabled" placeholder="请输入" v-model="form['inputValues_' + item.id]"></el-input>
            </el-form-item>
          </div>

          <!--radio 单选框-->
          <el-form-item v-if="child.fieldType === 'radio' && child && child.children && child.children.length > 0"
                        :label="child.gameField" :prop="'radioValues_'+child.id"
                        :rules="{required:child.isRequired==1?true:false,message:'不能为空',trigger:'change'}">
            <el-radio-group :disabled="disabled" v-model="form['radioValues_'+child.id]">
              <el-radio v-for="option in child.children" :key="option.id" :label="option.id">
                {{ option.gameField }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <!--checkbox 多选框-->
          <el-form-item v-if="child && child.fieldType === 'checkbox' &&  child.children && child.children.length > 0"
                        :label="child.gameField" :prop="'checkbox_' + child.gameKey"
                        :rules="[{ type: 'array', required: child.isRequired == 1 ? true : false, message: '请至少选择一个' + child.gameField, trigger: 'change' }]">
            <el-checkbox-group v-model="form['checkbox_' + child.gameKey]" v-if="child.gameKey && form['checkbox_' + child.gameKey]">
              <el-checkbox :disabled="disabled" v-for="(item,indx) in child.children" :key="indx" :label="item.id">
                {{ item.gameField }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" style="background:#B5C2D8 !important;color:#fff;">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {listDict} from '@/api/business/gameDict.js';
import {
  unboundPhonesByCategory
} from '@/api/business/staylnventory';

export default {
  name: 'staylnventoryView',
  props: {
    obj: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      type: '',//库存管理查看 只显示上传图片和属性
      disabled: true,
      isShow: false,
      //区服列表
      regionalServers: [],
      imgUrl: '',
      form: {},
      //游戏列表
      gameList: [],
      //渠道列表
      bindingChannelList: [],
      //库存状态列表
      stockStatusList: [],
      //回收列表
      recycleChannelList: [],
      //销售渠道
      saleChannelList: [],
      //回收客服
      recycleList: [],
      //换绑客服
      changeList: [],
      //销售客服
      sellList: [],
      //绑定手机列表
      phoneList: [],
      result: []
    }
  },
  created() {
    this.$nextTick(() => {
      //查询游戏列字典
      this.getDicts('game_category').then(res => {
        this.gameList = res.data
      })
      //查询绑定渠道字典
      this.getDicts('binding_channel').then(res => {
        this.bindingChannelList = res.data
      })
      //查询状态字典
      this.getDicts('stock_status').then(res => {
        this.stockStatusList = res.data
      })
      //查询回收渠道字典
      this.getDicts('recycle_channel').then(res => {
        this.recycleChannelList = res.data
      })
      //查询销售渠道
      this.getDicts('sale_channel').then(res => {
        this.saleChannelList = res.data
      })
      //查询回收客服
      this.passPost('recycle').then(res => {
        this.recycleList = res.data
      })
      //查询换绑客服
      this.passPost('change').then(res => {
        this.changeList = res.data
      })
      //查询销售客服
      this.passPost('sell').then(res => {
        this.sellList = res.data
      })

      // 查看
      this.handleUpdate(this.obj);
    })
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      console.log(row)

      this.disabled = true;//查看

      listDict({dictCodeId: row.dictCodeId}).then(response => {
        let data = response.data;
        let result = [];

        data.map(ii => {
          if (ii.gameKey === 'group') {
            // 获取区服
            this.regionalServers = ii.children;
          } else {
            result.push(ii);
          }
        })

        if (result.length > 0) {
          //处理多选框问题
          result.map((item, indx) => {
            if (item.fieldType == 'checkbox') {
              this.$set(this.form, 'checkbox_' + item.gameKey, new Array());
            }
          });
          this.result = result;

          let bindingChannelId = ''
          let obj = {
            phoneCode: row.phoneCode,
            phoneId: row.phoneId,
            phoneNumber: row.phoneNumber
          }
          this.bindingChannelList.forEach(item => {
            if (item.dictValue == row.phoneField) {
              bindingChannelId = item.dictCode
            }
          })
          unboundPhonesByCategory(row.phoneField).then(res => {
            this.phoneList = res.data
            this.phoneData = obj
            if (!this.phoneList.find(item => item.phoneId == this.phoneData.phoneId)) {
              this.phoneList.unshift(this.phoneData)
            }
          });
          this.bindingChannelId = bindingChannelId;
          this.form = {
            imagess: [],
            pxImagess: [],
            pzImagess: [],
            ...row,
            checkList: [],
            bindingChannelId,
            realNameId: Number(row.realNameId),
            dictCodeId: Number(row.dictCodeId)
          };

          // 动态赋值
          if (row && row.id && row.answer) {
            // 解析
            row = JSON.parse(row.answer);

            // 单选框 radio
            let radio = row.radioSelections;
            if (JSON.stringify(radio) != '{}') {
              for (var key in radio) {
                this.$set(this.form, 'radioValues_' + key, radio[key])
              }
            }

            // 单选框 select
            let dropDown = row.dropDown;
            if (JSON.stringify(dropDown) != '{}') {
              for (var key in dropDown) {
                this.$set(this.form, 'dropDown_' + key, dropDown[key])
              }
            }

            // 输入框 input
            let inputValues = row.inputValues;
            if (JSON.stringify(inputValues) != '{}') {
              for (var key in inputValues) {
                this.$set(this.form, 'inputValues_' + key, inputValues[key])
              }
            }

            let checkList = row.checkList;
            // 多选checkbox
            result.map(i => {
              if (i.fieldType == 'checkbox') {
                if (this.form.hasOwnProperty('checkbox_' + i.gameKey)) {
                  this.$set(this.form, 'checkbox_' + i.gameKey, new Array());
                }
                this.form['checkbox_' + i.gameKey] = checkList;
              }
            });
          }
        }
      })
    },

    handleShow(e) {
      this.type == e;
      if (e) this.type = e;
      else this.type = '';

      this.isShow = true;
    },
    handleClose() {
      this.isShow = false;
      this.$parent.viewShow = false;
    }
  }
}
</script>
